<template>
  <div class="login-wrap">
    <div class="ms-title">后台管理登录</div>
    <div class="ms-login">
      <el-form class="login_form"
               :model="form"
               :rules="rules"
               ref="loginFormRef">
        <!-- 用户名区 -->
        <el-form-item prop="username">
          <el-input prefix-icon="iconfont icon-yonghuming"
                    v-model="form.username"></el-input>
        </el-form-item>
        <!-- 密码区 -->
        <el-form-item prop="password">
          <el-input prefix-icon="iconfont icon-mima"
                    v-model="form.password"
                    type="password"></el-input>
        </el-form-item>
        <!-- 验证码区 -->
        <el-form-item>
          <el-input placeholder="请输入验证码"
                    class="verify"
                    v-model="form.verify"></el-input>
          <img class='verify_code_img'
               :src="image_url">
        </el-form-item>
        <!-- 按钮区 -->
        <el-form-item class="btns">
          <el-button type="primary"
                     class="submit"
                     @click="login">登录</el-button>
          <el-button type="danger"
                     class="reset"
                     @click="loginFormReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { v4 as uuidv4 } from 'uuid';
import { getverifyCode } from '@/api/apiRequest.js'
export default {
  created () {
    this.getImageUrl()
  },
  data () {
    return {
      // 这是登陆表单双向绑定的数据
      image_url: '',
      form: {
        username: 'guoguo',
        password: '123456',
        verify: ''
      },
      // 表单验证规则对象
      rules: {
        // 验证用户名是否合法
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
        ],
        // 验证密码是否合法
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    async getImageUrl () {
      this.form.uuid = uuidv4()
      let url = `${this.$store.state.HOST}/image/verification/${this.form.uuid}`
      this.image_url = url

    },
    login () {
      //登录
      this.$refs.loginFormRef.validate(async valid => {
        if (!valid) {
          return this.$message.error('验证失败，无法登录')
        }
        try {
          //校验成功
          const res = await this.$http.post('http://127.0.0.1:8000/login/', this.form)
          console.log(res);
          if (res.data.msg) {
            this.getImageUrl()
            return this.$message.error('登录失败')
          }

          // 将token存到sessionstorage中
          console.log(res.token);
          window.sessionStorage.setItem('token', res.data.token)
          window.sessionStorage.setItem('username', res.data.username)
          //跳转至主页
          this.$router.push({
            'name': 'Classes'

          })
          return this.$message.success('登录成功！')
        } catch (e) {
          // console.log(e);
          return this.$message.error(e)
        }







      })
    },
    // 重置表单事件
    loginFormReset () {
      this.$refs.loginFormRef.resetFields()
    },


  }
}
</script>

<style lang='sass' scoped>
.login-wrap
  position: relative
  background-attachment: fixed
  background: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2019-02-12%2Fddb46408aeca4ba0787ccade2e0872b7%2F00004.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&refer=http%3A%2F%2Fpic.vjshi.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636718122&t=517dfa327cf2b5ca923448f82701215e')
  background-size: cover
  background-position: center
  // background-color: red
  width: 100%
  height: 100%
.ms-title
  position: absolute
  top: 50%
  width: 100%
  margin-top: -11.5rem
  text-align: center
  font-size: 1.5rem
  font-weight: 600
  color: #fff
  // background-color: #fff
.ms-login
  position: absolute
  left: 50%
  top: 50%
  width: 15rem
  height: 11rem
  transform: translate(-50%,-50%)
  padding: 2rem
  border-radius: .25rem
  background-color: #fff
.btns
  display: flex
  justify-content: center
  .submit
    margin-right: 1rem
.verify
  width: 50%
.verify_code_img
  margin-left: .25rem
</style>